<!DOCTYPE HTML>
<html>
<head>
<title>模块化</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<style rel="stylesheet">
* {
	margin: 0px;
	padding: 0px;
}
</style>
<script>
	$(function() {
		var fullwidth = $(document).width() - 110 + "px";
		$("#main").animate({
			width : fullwidth,
			height : '15px'
		});
		$(".content").hover(function() {
			var color = $(this).parents('li').css('background-color');
			$(this).parents('li').css({
				'z-index' : '99'
			});
			$(this).css({
				"background-color" : color,
				'color' : '#fff'
			});
		}, function() {
			$(this).parents('li').css({
				'z-index' : ''
			});
			$(this).css({
				"background-color" : '',
				'color' : '#000'
			});
		});
		$(".content").click(function() {
			alert($(this).html());
		});
	})
</script>
</head>
<body>
	<div style="width: 100%; height: 300px;"></div>
	<div style="">
		<ul id="main"
			style="margin: 0 10px 0 100px; height: 0px; list-style: none; background-color: gray; position: relative; width: 0px;">
			<li
				style="position: absolute; z-index:2;width: 100px; height: 15px; background-color: gray; left: 0px;">
				<div
					style="margin: 0 10px; font-weight: bold; letter-spacing: 2px; color: #fff; text-align: center; height: 30px; background-color: #c49e59; position: relative; z-index: 1; top: -7px; left: -100px; border-radius: 3px;">
					<span style="line-height: 30px;">上下行</span>
				</div>
				<ul style="width: 1256px;list-style: none; position: absolute;left: 0;top: -8px;z-index: 2;">
					<li style="float:left;margin-left: 100px;*max-width:70px;">
						<ul style="list-style: none; position: relative">
							<li><div style="width:30px;height:30px;background-image: url('point.png');margin: 0 auto;"></div></li>
							<li style="margin-top: 10px;background-color: #ef9308;color: #fff;padding: 5px;border-radius: 3px;"><div style="text-align: center;">广州南</div></li>
						</ul>
					</li>
					<li style="float:left;margin-left: 100px;*max-width:70px;">
						<ul style="list-style: none; position: relative">
							<li><div style="width:30px;height:30px;background-image: url('point.png');margin: 0 auto;"></div></li>
							<li style="margin-top: 10px;background-color: #ef9308;color: #fff;padding: 5px;border-radius: 3px;"><div style="text-align: center;">庆盛</div></li>
						</ul>
					</li>
					<li style="float:left;margin-left: 100px;*max-width:70px;">
						<ul style="list-style: none; position: relative">
							<li><div style="width:30px;height:30px;background-image: url('point.png');margin: 0 auto;"></div></li>
							<li style="margin-top: 10px;background-color: #ef9308;color: #fff;padding: 5px;border-radius: 3px;"><div style="text-align: center;">虎门</div></li>
						</ul>
					</li>
					<li style="float:left;margin-left: 100px;*max-width:70px;">
						<ul style="list-style: none; position: relative">
							<li><div style="width:30px;height:30px;background-image: url('point.png');margin: 0 auto;"></div></li>
							<li style="margin-top: 10px;background-color: #ef9308;color: #fff;padding: 5px;border-radius: 3px;"><div style="text-align: center;">光明城</div></li>
						</ul>
					</li>
					<li style="float:left;margin-left: 100px;*max-width:70px;">
						<ul style="list-style: none; position: relative">
							<li><div style="width:30px;height:30px;background-image: url('point.png');margin: 0 auto;"></div></li>
							<li style="margin-top: 10px;background-color: #ef9308;color: #fff;padding: 5px;border-radius: 3px;"><div style="text-align: center;">深圳北</div></li>
						</ul>
					</li>
				</ul>
			</li>
			<li style="position: absolute; width: 300px; height: 15px; background-color: red; left: 100px;">
				<ul style="list-style: none; position: relative;z-index: 99;">
					<li style=" color: red;position: absolute; left: -40px; top: -70px;">开始公里标</li>
					<li
						style=" background-color: red;height: 50px; width: 3px; position: absolute; left: 0px; top: -50px;"></li>
					<li class="content"
						style=" color: red;z-index:99;height: 50px; width: 100%; text-align: center; position: absolute; left: 0px; top: -50px; line-height: 50px;">广州南1</li>
					<li
						style=" background-color: red;height: 50px; width: 3px;  position: absolute; right: 0px; top: -50px;"></li>
					<li style=" color: red;position: absolute; right: -40px; top: -70px;">结束公里标</li>
				</ul>
			</li>
			<li
				style="position: absolute; width: 300px; height: 15px; background-color: lightseagreen; left: 500px;">
				<ul style="list-style: none; position: relative;z-index: 99;">
					<li style="color: lightseagreen;position: absolute; left: -40px; top: -70px;">开始公里标</li>
					<li style="background-color: lightseagreen;height: 50px; width: 3px; position: absolute; left: 0px;top:-50px;"></li>
					<li class="content" style="color: lightseagreen;z-index:99;top:-50px;height: 50px; width: 100%; text-align: center; position: absolute; left: 0px; line-height: 50px;">广州南2</li>
					<li style="background-color: lightseagreen;height: 50px; width: 3px;  position: absolute; right: 0px;top:-50px;"></li>
					<li style="color: lightseagreen;position: absolute; right: -40px; top: -70px;">结束公里标</li>
				</ul>
			</li>
			<li
				style="position: absolute; width: 300px; height: 15px; background-color: orangered; left: 600px;">
				<ul style="list-style: none; position: relative;z-index: 99;">
					<li style="color: orangered;position: absolute; left: -40px; top: -70px;">开始公里标</li>
					<li style="background-color: orangered; height: 50px; width: 3px;  position: absolute; left: 0px; top: -50px;"></li>
					<li class="content" style="color: orangered;z-index:99;height: 50px; width: 100%; text-align: center; position: absolute; left: 0px; top: -50px; line-height: 50px;">广州南3</li>
					<li style="background-color: orangered; height: 50px; width: 3px;  position: absolute; right: 0px; top: -50px;"></li>
					<li style="color: orangered;position: absolute; right: -40px; top: -70px;">结束公里标</li>
				</ul>
			</li>
		</ul>
	</div>

</body>
</html>